<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>红单足球情报iOS - 测试版下载</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      :root {
        --primary: #131313;
        --primary-dark: #0056cc;
        --secondary: #5856d6;
        --text: #1d1d1f;
        --text-light: #86868b;
        --background: #ffffff;
        --card-bg: #f5f5f7;
        --success: #34c759;
        --border-radius: 18px;
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, sans-serif;
      }

      body {
        background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
        color: var(--text);
        line-height: 1.6;
        min-height: 100vh;
        padding: 20px;
      }

      .container {
        max-width: 800px;
        margin: 0 auto;
      }

      header {
        text-align: center;
        margin-bottom: 40px;
        padding-top: 20px;
      }

      .logo-container {
        width: 100px;
        height: 100px;
        margin: 0 auto 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 移除背景渐变 */
        background: none;
        /* 移除阴影 */
        box-shadow: none;
        /* 移除溢出隐藏（如果需要保留圆角则保持） */
        overflow: hidden;
      }

      .logo {
        /* 设置图片尺寸 */
        max-width: 100%;
        max-height: 100%;
        /* 添加圆角 */
        border-radius: 28px; /* iOS风格圆角 */
        /* 确保图片填充容器 */
        object-fit: cover;
      }

      .app-title {
        font-weight: normal; /* 取消加粗 */
        font-size: 1.5rem; /* 保持原有大小 */
        margin-bottom: 10px; /* 根据需要调整间距 */
      }

      h1 {
        font-size: 2.8rem;
        font-weight: 700;
        margin-bottom: 10px;
        background: linear-gradient(135deg, var(--text), var(--primary));
        -webkit-text-fill-color: transparent;
      }

      .subtitle {
        font-size: 1.2rem;
        color: var(--text-light);
        margin-bottom: 30px;
      }

      .download-card {
        background: var(--background);
        border-radius: var(--border-radius);
        padding: 40px;
        box-shadow: var(--shadow);
        margin-bottom: 30px;
        text-align: center;
        transition: transform 0.3s ease;
      }

      .download-card:hover {
        transform: translateY(-5px);
      }

      .version-badge {
        display: inline-block;
        background: var(--primary);
        color: white;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 25px;
      }

      .app-info {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-bottom: 35px;
        flex-wrap: wrap;
      }

      .info-item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .info-label {
        font-size: 0.9rem;
        color: var(--text-light);
        margin-bottom: 5px;
      }

      .info-value {
        font-weight: 600;
        font-size: 1.1rem;
      }

      .download-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background: linear-gradient(135deg, #1abc9d, #16a085);
        color: white;
        padding: 18px 40px;
        border-radius: 16px;
        text-decoration: none;
        font-size: 1.2rem;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 6px 20px rgba(26, 188, 157, 0.4);
        margin-bottom: 20px;
        width: 100%;
        max-width: 320px;
      }

      .download-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(26, 188, 157, 0.6);
        background: linear-gradient(135deg, #1dd1a1, #1abc9d);
      }

      .download-btn i {
        font-size: 1.4rem;
      }

      /* 更新内容样式 */
      .changelog {
        background: var(--background);
        border-radius: var(--border-radius);
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: var(--shadow);
      }

      .changelog h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .changelog h2 i {
        color: var(--primary);
      }

      .version-title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
      }

      .update-list {
        list-style-type: none;
      }

      .update-list li {
        margin-bottom: 8px;
        padding-left: 22px;
        position: relative;
      }

      .instructions {
        background: var(--card-bg);
        border-radius: var(--border-radius);
        padding: 30px;
        margin-bottom: 30px;
      }

      .instructions h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .instructions h2 i {
        color: var(--primary);
      }

      .steps {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .step {
        display: flex;
        gap: 15px;
      }

      .step-number {
        background: var(--primary);
        color: white;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        flex-shrink: 0;
      }

      .step-content h3 {
        font-size: 1.1rem;
        margin-bottom: 5px;
      }

      .step-content p {
        color: var(--text-light);
        font-size: 0.95rem;
      }

      .notes {
        background: var(--card-bg);
        border-radius: var(--border-radius);
        padding: 25px;
        border-left: 4px solid var(--success);
      }

      .notes h2 {
        font-size: 1.3rem;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .notes ul {
        padding-left: 20px;
      }

      .notes li {
        margin-bottom: 10px;
        color: var(--text-light);
      }

      footer {
        text-align: center;
        margin-top: 40px;
        padding: 20px;
        color: var(--text-light);
        font-size: 0.9rem;
      }

      .footer-links {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 10px;
      }

      .footer-links a {
        color: var(--primary);
        text-decoration: none;
      }

      @media (max-width: 600px) {
        .download-card {
          padding: 25px;
        }

        h1 {
          font-size: 2.2rem;
        }

        .app-info {
          gap: 20px;
        }

        .instructions,
        .notes,
        .changelog {
          padding: 20px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <div class="logo-container">
          <img src="assets/app-icon.png" alt="App Icon" class="logo" />
        </div>
        <h3 class="app-title">红单足球情报</h3>
        <p class="subtitle">体验最新功能，帮助我们改进产品</p>
      </header>

      <main>
        <div class="download-card">
          <span class="version-badge">测试版 v3.1_beta1</span>

          <div class="app-info">
            <div class="info-item">
              <span class="info-label">大小</span>
              <span class="info-value">10 MB</span>
            </div>
            <div class="info-item">
              <span class="info-label">更新时间</span>
              <span class="info-value">2025年10月22日</span>
            </div>
            <div class="info-item">
              <span class="info-label">系统兼容性</span>
              <span class="info-value">iOS 15.0+</span>
            </div>
          </div>

          <!-- 安装通知 -->
          <div class="install-notice">⚠️ 点击安装后请返回主屏幕查看进度</div>

          <a
            href="itms-services://?action=download-manifest&url=https://ios-beta-blue.vercel.app/manifest.plist"
            class="download-btn"
          >
            <i class="fas fa-download"></i>
            安装测试版
          </a>

          <p style="color: var(--text-light); font-size: 0.9rem">
            仅限已授权的测试设备
          </p>
        </div>

        <!-- 新增的更新内容说明部分 -->
        <section class="changelog">
          <h2><i class="fas fa-sync-alt"></i> 更新内容</h2>
          <ul class="update-list">
            <li>1、新增运营弹框</li>
            <li>2、优化赛事详情</li>
            <li>3、优化牛牛分析</li>
          </ul>
        </section>

        <section class="instructions">
          <h2><i class="fas fa-list-ol"></i> 安装说明</h2>
          <div class="steps">
            <div class="step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>点击安装按钮</h3>
                <p>使用iPhone或iPad的Safari浏览器点击上方的"安装测试版"按钮</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>确认安装</h3>
                <p>在弹出的对话框中点击"安装"，应用将开始下载</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>信任开发者</h3>
                <p>首次打开需要在"设置 → 通用 → 设备管理"中信任开发者证书</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">4</div>
              <div class="step-content">
                <h3>开始使用</h3>
                <p>返回主屏幕，等待安装完成，然后即可打开应用</p>
              </div>
            </div>
          </div>
        </section>

        <section class="notes">
          <h2><i class="fas fa-exclamation-circle"></i> 注意事项</h2>
          <ul>
            <li>此版本为测试版，可能包含未知问题或不稳定情况</li>
            <li>仅限已注册的设备安装，新设备需要联系管理员添加UDID</li>
            <li>测试版应用的有效期为一年，到期后需要更新版本</li>
            <li>请勿将此版本分发给未授权的用户</li>
            <li>遇到问题或希望提供反馈，请联系开发团队</li>
          </ul>
        </section>
      </main>

      <footer>
        <p>© 2025 长沙红单网络科技有限公司</p>
        <div class="footer-links">
          <a href="#">隐私政策</a>
          <a href="mailto:beta@yourcompany.com">联系我们</a>
        </div>
      </footer>
    </div>
  </body>
</html>
